<template>
<div class="row">
    <div class="col-sm-6 mb-3 mb-sm-0">
        <div class="card">
            <div class="card-body">
                <div class="logonBox">
                    <div class="box">
                        <div class="boxRight">
                            <div class="calendarBox">
                                <div class="head">
                                    <button class="btn btn-success" @click="prevMonth">上</button>
                                    {{state.year}}年{{state.month}}月
                                    <button class="btn btn-success" @click="nextMonth">下</button>
                                </div>
                                <div class="week">
                                    <div v-for="(item,index) in state.weekArr" :key="index">{{item}}</div>
                                </div>
                                <div class="calendar" v-show="contains(item)" v-for="(item,index) in state.dateArr" :key="index">
                                    <div :style="state.date == items ? 'background:#198754;color:#fff;' : ''" v-for="(items,indexs) in item" :key="indexs">
                                        {{state.date == items ? '今天' : items}}<img v-if="isCheck(items)" src="@/assets/imgs/head.jpg" /></div>
                                </div>
                            </div>
                            <!-- <div class="button" @click="onCalendar" >签到</div> -->
                            <!-- <div v-if="state.isElmessage" class="elmessage">
                                <span>今日签到成功</span> 
                                <span>获得+2积分</span>
                                </div> -->
                            
                            <p>实习总天数:<b>{{ data.allTime }}</b>天&nbsp;&nbsp;&nbsp;已签到天数:<b>{{ data.nowAllTime }}</b>天</p>
                            <button type="button" class="btn btn-warning" @click="getCity()" v-show="!data.isShow">签到</button>
                            <p v-show="!data.isShow">今天还没签到哟~抓紧签到呀！</p>
                            <p v-show="data.isShow">{{ data.city }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card">
            <div class="card-body">
                

                <h5 class="card-title">实习注意事项</h5>
                <p class="card-text">（1）充分认识实习的重要性，按培养方案和实习教学大纲要求，认真参加实习，全面完成实习任务。</p>
                <p class="card-text">（2）服从指导教师和实习单位的管理，严格遵守实习场所的规章制度和仪器设备操作规程，加强安全防范与环境保护，确保人身安全和设备财产安全。</p>
                <p class="card-text">（3）遵守作息时间，不迟到、不早退，不中途退出，因故不能参加者须事先办理请假手续。按实习单位要求进行着装，禁止将食品、饮料等与实习无关的物品带入实习场所，保持环境卫生，爱护公物。</p>
                <p class="card-text">（4）讲文明，懂礼貌，虚心学习，团结合作，保持适度交流，确保实习任务的顺利完成。</p>

            </div>
        </div>
    </div>
</div>
  
</template>
  
<script setup>
  import { nextTick, reactive ,onMounted } from 'vue'
  import { MP } from "@/assets/js/map.js"
  import axios from 'axios';
  
  const aaa = "广东省深圳市宝安区..."
  
  const data = reactive({
    ak:'URmfqivDsNjSEQ3tlXdEB8HOr7Fi6rOI',//秘钥
  
    city: localStorage.getItem("qiandao") ? '已签到' : '正在定位...',
    isShow: localStorage.getItem("qiandao") ? localStorage.getItem("qiandao") : false,

    // 实习总时长
    allTime: 0,
    // 签到天数
    nowAllTime: 0
  })

const state = reactive({
    weekArr:['日','一','二','三','四','五','六'],
    today : new Date(),
    year : '',
    month : '',
    day : '', //一周中的第几天，0代表周日，1代表周一
    date : '',
    dateArr: [],
    checkin: ['2022-09-01','2023-02-28'],
    isElmessage:false
})

const getCity = ()=> {
    let timer = null
    data.isShow = true
    state.isElmessage = true

    localStorage.setItem("qiandao", true)

    nextTick(()=>{
      MP(data.ak).then(BMap=> {
        //在此调用api
        var geolocation = new BMap.Geolocation()
        geolocation.getCurrentPosition(function(a){
          data.city = a.address.province + a.address.city
          if (aaa.includes(a.address.city)) {
              data.city = "签到成功！"
              data.nowAllTime ++
          }
        //   else {
        //       data.city = "请重连网络或打开定位，重新签到"
        //       timer = setTimeout(()=> {
        //         data.isShow = false
        //         data.city = "正在定位..."
        //       },10000)
        //   }
          // console.log(a.address)
        })
      })
    })
  
  }

//   计算实习总天数
const timeSet = (data)=> {
    const a = data[0].start_date.date.slice(0,10).replace(/-/g,"")
    const b = data[0].end_date.date.slice(0,10).replace(/-/g,"")

    const sTime = new Date(a.substr(0,4),a.substr(4,2),a.substr(6,2))
    const eTime = new Date(b.substr(0,4),b.substr(4,2),b.substr(6,2))
    const days = (eTime.getTime()-sTime.getTime())/24/60/60/1000

    // console.log(days)

    return days

}
// 计算签到到今天的总天数
const nowTimeSet = (data)=> {
    const d = new Date()

    const nowDate = String(d.getDate() <= 9 ? ("0" + d.getDate()) : d.getDate())
    const nowMonth = String(d.getMonth() <= 9 ? ("0" + (d.getMonth()+1)) : d.getMonth()+1)
    const nowYear = String(d.getFullYear())


    const a = data[0].start_date.date.slice(0,10).replace(/-/g,"")
    const b = nowYear+nowMonth+nowDate

    const sTime = new Date(a.substr(0,4),a.substr(4,2),a.substr(6,2))
    const eTime = new Date(b.substr(0,4),b.substr(4,2),b.substr(6,2))
    const days = (eTime.getTime()-sTime.getTime())/24/60/60/1000

    // console.log(days)

    return days
}

  const getTime =()=> {
    axios.get('http://127.0.0.1:9001/test/time.php', {
      params: {
        "name": localStorage.getItem("token")
      }
    }).then(re=> {
      // console.log(re.data[0]);
      let item = re.data[0]
      data.startDate = item.start_date.date.slice(0,10)
      data.endDate = item.end_date.date.slice(0,10)

      data.allTime = timeSet(re.data)
      data.nowAllTime = localStorage.getItem("qiandao") ? nowTimeSet(re.data) + 1 : nowTimeSet(re.data)
      
    //   data.nowAllTime > data.allTime
    //   && (data.isShow = true
    //   && (data.city = "实习已结束")
    //   && (data.nowAllTime = data.allTime))

    }).catch(e=> {
      console.log(e);
    })
  }
  getTime()

  onMounted(()=>{
    state.year = state.today.getFullYear();
    state.month = state.today.getMonth() + 1;
    state.day = state.today.getDay();
    state.date = state.today.getDate();
    getCalendar();
    // signList({api_token:localStorage.getItem('token')}).then(res=>{
    //     console.log(res,'签到')
    // })
})
// const onEmit = () => {
//     emit('onClose',false)
// }
const onCalendar = () => {
    state.isElmessage = true;
    setTimeout(()=>{
        state.isElmessage = false;
    },1000);
}
const isLeap = () => {
    const year = state.year;
    if(year % 4 == 0 && year % 100 > 0) {
        return true;
    }else if(year % 400 == 0 && year % 3200 > 0) {
        return true;
    }else {
        return false;
    }
}
const getLen = () => {
    const month = state.month;
    if(month == 2) {
        if(isLeap()) {
            return 29;
        }else {
            return 28;
        }
    }else {
        if(month < 8) {
            if(month % 2 > 0) {
                return 31;
            }else {
                return 30;
            }
        }else {
            if(month % 2 > 0) {
                return 30;
            }else {
                return 31;
            }
        }
    }
}
const getCalendarTime = () => {
    return state.year + '-' + state.month + '-' + state.date;
}
const getCalendar = () => {
    var len = getLen();
    var d = new Date(state.year, state.month - 1, 1);
    var dfw = d.getDay();
    var arr = new Array();
    var tem = 0;
    for (var i = 0; i < 6; i++) {
        arr[i] = new Array();
        for (var j = 0; j < 7; j++) {
            tem++;
            if (tem - dfw > 0 && tem - dfw <= len) {
                arr[i][j] = tem - dfw;
            } else {
                arr[i][j] = "";
            }
        }
    }
    state.dateArr = arr;
    // state.dateArr.length = 5;
}
getCalendar()
//切换到下个月
const nextMonth = () => {
    if(state.month == 12) {
        state.year ++;
        state.month = 1;
    }else {
        state.month ++;
    };
    getCalendar();
}
//切换到上个月
const prevMonth = () => {
    if(state.month == 1) {
        state.year --;
        state.month = 12;
    }else {
        state.month --;
    }
    getCalendar();
}
const contains = (arr) => {
    if((arr[0] == '') && (arr[1] == '') && (arr[2] == '') && (arr[3] == '') && (arr[4] == '') && (arr[5] == '') && (arr[6] == '')) {
        return false;
    }else {
        return true;
    }
}
const isCheck = (index) => {
    const date =`${state.year}-${state.month<10?'0'+state.month:state.month}-${index<10?'0'+index:index}`
    for(let i in state.checkin) {
        // console.log(date,state.checkin[i]);
        if(date == state.checkin[i]) {
            return true;
        }
    }
    return false;
}

</script>
  
<style lang="scss" scoped>
.row {
    width: 97%;
    margin: 0 auto;
}
.logonBox{
    position: relative;
    .box{
        max-width: 1200px;
        // height: 600px;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        align-content: center;
        .boxRight{
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            position: relative;
            .icon{
                width: 33px;
                height: 33px;
                position: absolute;
                top: 20px;
                right: 20px;
            }
            .calendarBox{
                max-width: 354px;
                // height: 413px;
                background: #eee;
                padding: 0 57px;
                margin-bottom: 20px;
                .head{
                    width: 100%;
                    height: 58px;
                    font-size: 18px;
                    font-weight: 400;
                    text-align: center;
                    color: #198754;
                    line-height: 58px;
                }
                .week{
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin: 25px 0 0px 0;
                    div{
                        width: 30px;
                        height: 30px;
                        font-size: 16px;
                        font-weight: 400;
                        text-align: center;
                        color: #333333;
                    }
                }
                .calendar{
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    div{
                        width: 30px;
                        height: 30px;
                        background: #f0f0f0;
                        border-radius: 50%;
                        font-size: 12px;
                        font-weight: 400;
                        text-align: center;
                        color: #333333;
                        line-height: 30px;
                        margin-bottom: 15px;
                        position: relative;
                        cursor: pointer;
                        img{
                            width: 20px;
                            height: 18px;
                            position: absolute;
                            top: 9px;
                            left: 9px;
                        }
                    }
                }
            }
            .button{
                padding: 0 20px;
                height: 47px;
                background: linear-gradient(262deg,#ff8c29 9%, #f9634c 94%);
                border-radius: 24px;
                font-size: 18px;
                font-weight: 500;
                text-align: center;
                color: #ffffff;
                line-height: 47px;
                margin-top: 30px;
                cursor: pointer;
            }
            .elmessage{
                width: 238px;
                height: 93px;
                opacity: 0.7;
                background: #000000;
                border-radius: 10px;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                position: absolute;
                top: calc(50% - 46px);
                left: calc(50% - 119px);
                span{
                    font-size: 18px;
                    font-weight: 400;
                    text-align: center;
                    color: #ffffff;
                    letter-spacing: 0.72px;
                }
            }
        }
    }
}

@media (max-width: 767px) {
    .row {
        flex-direction: column;
        padding: 0 10px;
        max-width: 100%;
        margin: 0;
    }
    .row>div {
        width: 100%;
        padding: 0!important;
    }
    .row>div:first-child {
        margin-bottom: 1rem;
    }
}
</style>